<template>
    <view class="bottom">
        <Header></Header>
        <view class="home">
            <u-icon style="border: 1px #00eaff solid;border-radius: 50%;margin-left: 50rpx;margin-right: 20rpx"
                    name="arrow-left" color="#00eaff" @click="back"></u-icon>
            <text style="color: #00eaff;padding-right: 30rpx">Blind box unboxing</text>
        </view>
        <view>
            <view>
                <u-tabs :list="categoryList" @change="changeCategory" :current="current" :is-scroll="false"
                        bg-color="#0f0e2d" inactive-color="#4e5278" active-color="#00eaff"
                        :active-item-style="{color: '#00eaff', fontSize: '28rpx'}">
                </u-tabs>
            </view>
            <box-item :box-list="boxList"></box-item>
        </view>
        <view class="no-more">
            <view v-if="noMore">
                <u-divider style="padding: 30rpx" bg-color="#0f0e2d">There's no more data left</u-divider>
            </view>
        </view>
        <!-- 回到顶部 -->
        <u-back-top :scroll-top="scrollTop"></u-back-top>
        <custom-tabbar></custom-tabbar>
    </view>
</template>

<script>
import Header from "@/components/header/header.vue";
import CustomTabbar from "@/components/tabbar/tabbar.vue";
import BoxItem from "@/components/boxList/boxList.vue";

export default {
    name: 'box',
    components: {
        CustomTabbar,
        Header,
        BoxItem
    },
    data() {
        return {
            windowsWidth: 0,
            // 分类列表
            categoryList: [],
            // 分类id
            categoryId: 0,
            // 当前分类
            current: 0,
            // 商品列表
            boxList: [],
            total: '',
            current_page: 1,
            last_page: 0,
            // 滚动距离
            scrollTop: 0,
            // 到底
            noMore: false,

        };
    },
    onLoad() {
        this.getCategoryList()
    },
    // 滚动监听
    onPageScroll(e) {
        this.scrollTop = e.scrollTop;
    },
    // 触底加载更多
    onReachBottom() {
        this.current_page++
        this.$u.api.getBoxList({
            page: this.current_page,
            category_id: this.categoryId,
        }).then(res => {
            // 没数据
            if (res.data.data.length === 0) {
                this.noMore = true;
                return
            }
            this.noMore = false;
            this.boxList = this.boxList.concat(res.data.data)
            this.total = res.data.total
            this.current_page = res.data.current_page
            this.last_page = res.data.last_page
        })
    },
    mounted() {
        this.windowsWidth = this.$store.getters.getWindowsWidth;
    },
    methods: {
        // 返回
        back() {
            this.$u.route({
                type: 'navigateBack',
                delta: 1
            })
        },
        // 获取分类列表
        getCategoryList() {
            this.$u.api.categoryList().then(res => {
                this.categoryList = res.data;
                this.categoryId = this.categoryList[0].category_id;
                this.getBoxList()
            })
        },
        // 切换分类
        changeCategory(index) {
            this.categoryId = this.categoryList[index].category_id;
            this.current = index;
            this.getBoxList()
        },
        // 获取箱子列表
        getBoxList() {
            this.current_page = 1;
            this.$u.api.getBoxList({
                page: this.current_page,
                category_id: this.categoryId,
            }).then(res => {
                // 没数据
                if (res.data.data.length === 0) {
                    this.noMore = true;
                    this.boxList = []
                    return
                }
                this.noMore = false;
                this.boxList = res.data.data
                this.total = res.data.total
                this.current_page = res.data.current_page
                this.last_page = res.data.last_page
            })
        }

    },
}
</script>

<style lang="scss" scoped>
.home {
    line-height: 100rpx;
    //margin-left: 30rpx;
    color: white;
    font-size: 34rpx;
    background-image: url("@/static/images/header-bg.png");
    background-size: cover;
    height: 100rpx;
}



.no-more {
    //height: 100vh;
}
</style>
